<template>
  <a-locale-provider :locale="locale">
    <div id="app" :class="{ ie: isIe }">
      <router-view class="bpm-container" />
      <a-drawer
        :closable="closable"
        :visible="visible"
        :maskClosable="maskClosable"
        @close="closeDrawer"
        class="formDrawer"
        placement="right"
        width="1200"
      >
   
        <iframe :src="formUrl" ref="formIframe" frameborder="0" class="form-frame"></iframe>
      </a-drawer>
    </div>
  </a-locale-provider>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";

import { LocaleProvider, Drawer} from "@h3/antd-vue";

import OAuthApi from "@/apis/oauth";

import env from "@/config/env";

import zhCN from "@h3/antd-vue/lib/locale-provider/zh_CN";
import enUS from "@h3/antd-vue/lib/locale-provider/en_US";

@Component({
  components: {
    ALocaleProvider: LocaleProvider,
    ADrawer: Drawer
  }
})
export default class App extends Vue {
  formUrl: string = "";
  visible: boolean = false;
  maskClosable: boolean = true;
  closable: boolean = true;
  @Provide()
  showForm(formUrl: string) {
    this.formUrl = formUrl;
    this.visible = true;
  }
  created() {
      window.addEventListener("message",(event) => {
      if(event.data == "close")
      {
        this.visible = false;
        
        (this as any).$eventBus.$emit("reloadList");
      }
    })
  }
  closeDrawer() {
    this.visible = false;
  }
  get locale() {
    switch (this.$i18n.locale) {
      case "zh":
      default:
        // return require('@h3/antd-vue/lib/locale-provider/zh_CN');
        return zhCN;

      case "en":
        // return require('@h3/antd-vue/lib/locale-provider/en_US');
        return enUS;
    }
  }

  get isIe() {
    if (window.Environment && window.Environment.isIe !== undefined) {
      return window.Environment.isIe;
    }
    return false;
  }

  async mounted() {
    const config = await OAuthApi.getSystemConfig();
    if (config) {
      config.apiHost = env.apiHost;
      this.$store.commit("setConfig", config);
    }

  }
}
</script>
<style lang="less" scoped>
.form-frame {
  width: 100%;
  height: 100vh;
}
</style>
